<template>
  <!-- 临时工费登记表 -->
  <div class="app-container">
    <div style="width: 90%; margin-left: 5%;">
      <el-form :inline="true" label-width="130px" size="mini" label-position="right" class="demo-ruleForm">
        <div style="width: 100%;">
        	<div style="width: 50%;  float: left;">
        		<el-form-item label="状态*">
        			<template>
        				<el-radio v-model="EditObj.Status" :label="0">发布</el-radio>
        				<el-radio v-model="EditObj.Status" :label="1">作废</el-radio>
        			</template>
        		</el-form-item>
        	</div>
        	<div style="width: 50%; float: left;">
        		<el-form-item label="输送模式*">
        			<template>
        				<el-radio v-model="EditObj.DeliverType" :label="1">学校</el-radio>
        				<el-radio v-model="EditObj.DeliverType" :label="2">企业</el-radio>
        			</template>
        		</el-form-item>
        	</div>

        </div>
        <div style="width: 100%;">
        	<div style="width: 50%; float: left;height: 50px;">
        		<el-form-item label="输送机构" style="width: 100%; display: flex;">
        			<el-select v-model="EditObj.Conveyingmechanism" clearable placeholder="请选择"  @change="getBatch" style="width: 100%; display: flex;">
        				<el-option v-for="item in Conveyingmechanismlist" :key="item.Conveyingmechanism" :label="item.Conveyingmechanism"
        				 :value="item.Conveyingmechanism">
        				</el-option>
        			</el-select>
        		</el-form-item>
        	</div>
        	<div style="width: 50%; float: left;height: 50px;">
        		<el-form-item label="批次" class="geshi">
        		  <el-select v-model="EditObj.Batch" clearable placeholder="请选择" @change="selectChange" style="width: 100%; display: flex;">
        		    <el-option v-for="item in Batchlist" :key="item.Batch" :label="item.Batch" :value="item.Batch">
        		      <span style="float: left">{{ item.Batch }}</span>
        		      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.Conveyingmechanism }}</span>
        		    </el-option>
        		  </el-select>
        		</el-form-item>
        	</div>
        </div>
        <div style="width: 100%;">
        	<div style="width: 50%; float: left;">
        		<el-form-item label="输送月数" style="width: 100%; display: flex;">
              <el-select v-model="EditObj.Months" clearable placeholder="请选择" style="width: 100%; display: flex;">
              	<el-option v-for="item in MonthsOption" :key="item.value" :label="item.label" :value="item.value">
              	  <span style="float: left">{{ item.label }}</span>
              	</el-option>
              </el-select>
        		</el-form-item>
        	</div>
        	<div style="width: 50%; float: left;">
        		<el-form-item label="岗位" style="width: 100%; display: flex;">
              <el-select v-model="EditObj.Post" clearable placeholder="请选择"  style="width: 100%; display: flex;">
              	<el-option v-for="item in Joblist" :key="item.JobName" :label="item.JobName"
              	 :value="item.JobName">
              	</el-option>
              </el-select>
        		</el-form-item>
        	</div>
        </div>
        <div style="width: 100%;">

          <div style="width: 50%; float: left;">
            <el-form-item label="输送期限" style="width: 100%; display: flex;">
            	<el-date-picker v-model="EditObj.StratConveyorDate" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"
            	 style="width: 49%; display: flex; float: left;">
            	</el-date-picker>
            	<span style="width: 2%; display: flex; float: left;">-</span>
            	<el-date-picker v-model="EditObj.EndConveyorDate" type="date" value-format="yyyy-MM-dd" placeholder="结束时间" style="width: 49%; display: flex; float: left;">
            	</el-date-picker>
            </el-form-item>
          </div>


        </div>


        <div style="width: 100%; "  >
          <div style="width: 50%;">
            <el-form-item label="管理费计算方式" class="geshi">
              <template>
                <el-radio v-model="EditObj.TemporaryCostType" :label="1">按月计算</el-radio>
                <el-radio v-model="EditObj.TemporaryCostType" :label="3">按小时计算</el-radio>
              </template>
            </el-form-item>
          </div>
          <div style="width: 50%; float: left;" v-if="EditObj.TemporaryCostType == 3">
            <!-- v-if="EditObj.TemporaryCostType == 3"-->
            <el-form-item label="计算方式" class="geshi" >
              <template>
                <el-radio v-model="EditObj.CalculationMethod" :label="1">借调单位(无管理费)</el-radio>
                <el-radio v-model="EditObj.CalculationMethod" :label="2">借调单位(有管理费)</el-radio>
                <el-radio v-model="EditObj.CalculationMethod" :label="3">新宝(有管理费)</el-radio>
              </template>
            </el-form-item>
          </div>
          <div style="width: 50%; float: left;" v-if="EditObj.CalculationMethod ==2 ||this.EditObj.CalculationMethod==3 ||this.EditObj.TemporaryCostType==1">
            <el-form-item label="管理费金额" style="width: 100%;  display: flex;">
              <el-input v-model="EditObj.TemporaryCost" placeholder=""></el-input>
            </el-form-item>
          </div>
        </div>


        <div style="width: 100%; ">

          <div style="width: 50%; float: left;" v-if="EditObj.TemporaryCostType == 3">
            <el-form-item label="工资单价" style="width: 100%; display: flex;">
              <el-input v-model="EditObj.WageAmount" placeholder=""></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%; float: left;" >
            <el-form-item label="车费金额" style="width: 100%; display: flex;">
              <el-input v-model="EditObj.CarCost" placeholder=""></el-input>
            </el-form-item>
          </div>
        </div>

        <div style="width: 100%;" >
          <div style="width: 50%; float: left;" v-if="EditObj.TemporaryCostType == 1">
            <el-form-item label="管理费出勤天数" style="width: 100%; display: flex;">
              <el-input v-model="EditObj.TemporaryCostDay" placeholder=""></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%; float: left;">
            <el-form-item label="车费出勤天数" style="width: 100%; display: flex;">
              <el-input v-model="EditObj.TemporaryCostCarDay" placeholder=""></el-input>
            </el-form-item>
          </div>

        </div>
        <div style="width: 100%;">
          <div class="divgeshi">
            <el-form-item label="驻厂人员费用" class="geshi">
              <el-input v-model="EditObj.ResidentPersonnelCost" placeholder=""></el-input>
            </el-form-item>
          </div>
          <div class="divgeshi">
            <el-form-item label="驻厂人员人数 *" class="geshi">
              <el-input v-model="EditObj.ResidentPersonnelNum" placeholder=""></el-input>
            </el-form-item>
          </div>
        </div>

        <div style="width: 100%;">
          <!-- <div class="divgeshi">
            <el-form-item label="发放次数 *" class="geshi">
              <el-input v-model="EditObj.SendNum" placeholder=""></el-input>
            </el-form-item>
          </div> -->
          <div class="divgeshi">
            <el-form-item label="预计报道人数 *" class="geshi">
              <el-input v-model="EditObj.ReportNum" placeholder=""></el-input>
            </el-form-item>
          </div>
        </div>

        <div style="width: 100%;">
          <div class="divgeshi">
            <el-form-item label="联系人 *" class="geshi">
              <el-input v-model="EditObj.Contacts" placeholder=""></el-input>
            </el-form-item>
          </div>
          <div class="divgeshi">
            <el-form-item label="联系方式 *" class="geshi">
              <el-input v-model="EditObj.Tell" placeholder=""></el-input>
            </el-form-item>
          </div>
        </div>

       <!-- <div style="width: 100%;">

        	<el-button @click="addResident" style="width: 100%;" type="success" size="mini">添加驻厂人员</el-button>
        	<el-table ref="table" :data="ResidentList" size="mini" border style="width: 100%; margin-top: 5px;">
        		<el-table-column label="单位id">
        			<template slot-scope="scope">
        				<el-input v-model="scope.row.Organizeid" placeholder="单位id"></el-input>
        			</template>
        		</el-table-column>
        		<el-table-column label="单位">
        			<template slot-scope="scope">
        				<el-input v-model="scope.row.Organizename" placeholder="单位"></el-input>
        				</el-select>
        			</template>
        		</el-table-column>
        		<el-table-column label="驻厂人员名称">
        			<template slot-scope="scope">
        				<el-input v-model="scope.row.UserName" placeholder="驻厂人员名称"></el-input>
        				</el-select>
        			</template>
        		</el-table-column>
        		<el-table-column label="联系方式">
        			<template slot-scope="scope">
        				<el-input v-model="scope.row.Tel" placeholder="联系方式"></el-input>
        				</el-select>
        			</template>
        		</el-table-column>
        		<el-table-column align="center" label="操作">
        			<template slot-scope="scope">
        				<el-button type="danger" size="small" @click="delResident(scope)">删除</el-button>
        			</template>
        		</el-table-column>

        	</el-table>
        </div> -->

        <el-button type="primary" @click="confirmData" style="width: 100%;">提交</el-button>


      </el-form>
    </div>


  </div>

</template>

<script>
  import path from 'path'
  import {
  	deepClone
  } from '@/utils'
  import {
  	getSelectList,
    getConveyingmechanism
  } from '@/api/getSelect'
  import {
  	updateTemporaryCostRecord,
  	getDataList,
  	deleteMonth,
    deleteResident
  } from '@/api/school'

  const defaultObject = {

  }
  export default {

    data() {
      return {
        MonthsOption: [{
          value: 1,
          label: '未满一个月'
        }, {
          value: 2,
          label: '小于两个月'
        }, {
          value: 3,
          label: '大于等于两个月'
        }],
        EditObj: Object.assign({}, defaultObject),
        Conveyingmechanismlist: [],
        Resident: {},
        ResidentList: [],
        Batchlist: [],
        Joblist: [],
        TemporaryCostMonth: [],
        Search: { // 查询条件
        	total: 0, // 总记录数
        	RNO: '001', // 表编号  根据Controller中对应的表编号
        	jsWhere: '' // 自定义条件
        },
        SearchBD: { // 查询条件
        	total: 0, // 总记录数
        	RNO: '001', // 表编号  根据Controller中对应的表编号
        	jsWhere: '' // 自定义条件
        },
        SearchRecord: { // 查询条件
        	total: 0, // 总记录数
        	RNO: '006', // 表编号  根据Controller中对应的表编号
        	jsWhere: '' // 自定义条件
        },
        SearchMonth: { // 查询条件
        	total: 0, // 总记录数
        	RNO: '007', // 表编号  根据Controller中对应的表编号
        	jsWhere: '' // 自定义条件
        },
        SearchPeople: { // 驻场人员
        	total: 0, // 总记录数
        	RNO: '012', // 表编号  根据Controller中对应的表编号
        	jsWhere: '' // 自定义条件
        },
        SearchJob: { // 职位表
        	total: 0, // 总记录数
        	RNO: '003', // 表编号  根据Controller中对应的表编号
        	jsWhere: '' // 自定义条件
        }
      }
    },
    computed: {

    },
    created() {
      this.getSelect()
      if (this.$route.query.JumpID != undefined) {
        this.DataListData()
      }
    },
    methods: {
      add() {
        this.TemporaryCostMonth.push({
          Month: "",
          Cost: ""
        });
        this.$nextTick(() => {
          this.initInputDOM();
        });
      },
      //减行
      del({
        $index,
        row
      }) {
        this.TemporaryCostMonth.splice($index, 1);
      },
      async getSelect() { // 获取列表数据，通用
      	const res = await getConveyingmechanism({
      	  billID: 2
      	})
      	this.Conveyingmechanismlist = res.data.Table
        const resjob = await getSelectList({
          data: JSON.stringify(this.SearchJob)
        })
        this.Joblist = resjob.data.Table
      },
      async DataListData() { // 获取数据
        if (this.$route.query.JumpID != undefined) {
          this.EditObj = null
          //获取表单头
          this.SearchRecord.TemporaryCostRecordNo = this.$route.query.JumpID
          const resultRecord = await getDataList({
            data: JSON.stringify(this.SearchRecord)
          })
          this.SearchPeople.TemporaryCostRecordNo = this.$route.query.JumpID
          const resultPeople = await getDataList({
          	data: JSON.stringify(this.SearchPeople)
          })

          if (this.inputName == null) {
            this.inputName = this.$route.query.JumpID;
          }
          this.EditObj = resultRecord.data.Table[0];
          this.ResidentList = resultPeople.data.Table;

        }
      },
      async confirmData() {
        for (let i = 0; i < this.ResidentList.length; i++) {
        	this.ResidentList[i].Status = this.EditObj.Status;
        	this.ResidentList[i].DeliverType = this.EditObj.DeliverType;
        	this.ResidentList[i].Conveyingmechanism = this.EditObj.Conveyingmechanism;
        	this.ResidentList[i].Cost = this.EditObj.ResidentPersonnelCost;
          this.ResidentList[i].EndConveyorDate = this.EditObj.EndConveyorDate
          this.ResidentList[i].Batch = this.EditObj.Batch
        }
        this.Resident.Conveyingmechanism = this.EditObj.Conveyingmechanism

        const result = await updateTemporaryCostRecord({
          TemporaryCost: JSON.stringify(this.EditObj),
          TemporaryCostMonth1: JSON.stringify(this.TemporaryCostMonth),
          Resident: JSON.stringify(this.Resident),
          ResidentList: JSON.stringify(this.ResidentList),
          billID: this.EditObj.TemporaryCostRecordNo,
          IsPostBack: true
        })
        if (result.code === 20000) {
          const {
            description,
            key,
            name
          } = this.EditObj
          this.dialogVisible = false
          this.$notify({
            title: 'Success',
            dangerouslyUseHTMLString: true,
            message: result.message,
            type: 'success'
          })
          this.$router.push({
          	path: '/RegistrationDetailE',
          	query: {

          	}
          })
        } else {
          this.$notify({
            title: 'error',
            dangerouslyUseHTMLString: true,
            message: result.message,
            type: 'error'
          })
        }
      },
      addResident() {
				this.ResidentList.push({
					Status: "",
					DeliverType: "",
					Organizeid: "",
					Organizename: "",
					UserName: "",
					Tel: "",
				});
				this.$nextTick(() => {
					this.initInputDOM();
				});
			},
      //获取批次
      async getBatch() {
        this.Search.Conveyingmechanism = this.EditObj.Conveyingmechanism
        const resbatch = await getSelectList({
          data: JSON.stringify(this.Search)
        })
        this.Batchlist = resbatch.data.Table
      },
      //选择批次后 信息对接
      selectChange(val) {
        let obj = {};
        obj = this.Batchlist.find((item) => {
          return item.Batch === val;
        });
        this.NumberOfEmployees = obj.NumberOfEmployees
        this.EditObj.StratConveyorDate = obj.StratConveyorDate
        this.EditObj.EndConveyorDate = obj.EndConveyorDate
      },
      //减行驻场人员
      delResident({
      	$index,
      	row
      }) {
      	if (row.ID != undefined) {
      	  this.$confirm('确定删除序号为 ' + row.ID + ' 的数据吗?', {
      	    confirmButtonText: '确认',
      	    cancelButtonText: '取消',
      	    type: 'warning'
      	  }).then(async () => {
      	    await deleteResident({
      	      ID: JSON.stringify(row.ID)
      	    })
      	    this.ResidentList.splice($index, 1)
      	  })
      	} else {
      	  this.ResidentList.splice($index, 1);
      	}
      }

    }
  }
</script>

<style>
  .el-form-item__content {
    flex: 1;
  }

  .geshi {
    width: 100%;
    display: flex !important;
  }

  .divgeshi {
    width: 50%;
    float: left;
  }
</style>
